<template>
  <div>
    <div class="card px-3 pt-3 mb-3">
      <el-form @submit.native.prevent :inline="true" :model="params">
        <el-form-item>
          <el-date-picker
            v-model="params.startMonth"
            type="month"
            placeholder="起始时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>-</el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="params.month"
            type="month"
            placeholder="结束时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <select-org-bank
            v-model="bankId"
            placeholder="选择银行"
            filterable
            clearable
            @select="selectBank"
          ></select-org-bank>
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" icon="el-icon-search" @click="listGetData()">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="card p-3 mb-3">
      <div class="analy-title mb-3">银行统计分析</div>
      <div class="w-100">
        <analy-bank-chart :query-params="queryParams" v-show="!bankId"></analy-bank-chart>
        <analy-bank-agency
          :query-params="queryParams"
          :bank-info="bankInfo"
          v-show="bankId"
          @close="onBankClose"
        ></analy-bank-agency>
      </div>
    </div>

    <div class="card p-3">
      <div class="d-flex justify-content-between mb-3">
        <div class="analy-title">项目详情数据</div>

        <div class="d-flex">
          <el-radio-group class="anylay-type-radio mr-3" v-model="projectType">
            <el-radio-button
              v-for="(type, index) in enumProjectType"
              :key="index"
              :label="type.value"
            >
              <span class="mx-3">{{ type.label }}</span>
              <!-- <span>{{type.count}}</span> -->
            </el-radio-button>
          </el-radio-group>
          <el-button
            :loading="downloadLoading"
            type="text"
            icon="el-icon-download"
            @click="exportExcel()"
          >
            下载{{ projectTypeLabel }}项目
          </el-button>
        </div>
      </div>

      <div v-show="projectType === 0">
        <analy-list ref="listRef0" :query-params="inQueryParams"></analy-list>
      </div>
      <div v-show="projectType === 1">
        <analy-list ref="listRef1" :query-params="outQueryParams"></analy-list>
      </div>
      <div v-show="projectType === 2">
        <analy-list ref="listRef2" :query-params="newQueryParams"></analy-list>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { enumProjectType } from './reportMixins'
import { getMonthLastDayDate } from '@/common/plugins/tools/date'

import SelectOrgBank from '@/bigcredit/views/program/components/SelectOrgBank'
import AnalyBankChart from '@/credit/views/city/report/AnalyBankChart'
import AnalyBankAgency from '@/credit/views/city/report/AnalyBankAgency'
import AnalyList from '@/credit/views/city/report/AnalyList'

export default {
  components: {
    SelectOrgBank,
    AnalyBankChart,
    AnalyBankAgency,
    AnalyList,
  },
  props: {},
  data() {
    return {
      loading: false,
      downloadLoading: false,
      params: {
        month: new Date(),
        startMonth: new Date(new Date().getFullYear(), 0, 1),
      },
      bankId: '',
      bankInfo: {},
      queryParams: {
        addressCode: '',
        startDate: '',
        endDate: '',
        // bankCode: '',
        busStatus: '',
        // guaType: '1,2,3,4',
        mainBus: '',
      },

      enumProjectType,
      projectType: 0,
    }
  },
  computed: {
    ...mapGetters(['clientId']),
    projectTypeLabel() {
      const item = enumProjectType.find(it => it.value === this.projectType)
      return item ? item.label : ''
    },
    inQueryParams() {
      return {
        ...this.queryParams,
        bankId: this.bankId,
        busStatus: 0,
      }
    },
    outQueryParams() {
      return {
        ...this.queryParams,
        bankId: this.bankId,
        busStatus: 1,
      }
    },
    newQueryParams() {
      return {
        ...this.queryParams,
        bankId: this.bankId,
        busStatus: 2,
      }
    },
  },
  watch: {},
  created() {
    this.setDateParams()
  },
  mounted() {},
  methods: {
    selectBank(bank) {
      this.bankInfo = bank
    },
    onBankClose() {
      this.bankId = ''
      this.bankInfo = {}
    },
    setDateParams() {
      const date = this.params.month || new Date()
      const startDate = this.params.startMonth || new Date()
      const year = date.getFullYear()
      const month = date.getMonth()

      const start = new Date(startDate.getFullYear(), startDate.getMonth(), 1)
      const end = getMonthLastDayDate(year, month)

      this.queryParams.startDate = start
      this.queryParams.endDate = end
      this.queryParams.clientId = this.clientId
    },
    listGetData() {
      this.setDateParams()
    },
    exportExcel() {
      const listRef = this.$refs[`listRef${this.projectType}`]
      if (listRef) {
        this.downloadLoading = true
        listRef.exportExcel(`${this.projectTypeLabel}项目`).finally(() => {
          this.downloadLoading = false
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import './analy.scss';
</style>
